<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <link type="text/css" rel="stylesheet"
          href="/api/udin/assets/static/site/np_template/css/fontawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/global.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/widget.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/variousComponents.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/images.css"/>
    <script type="text/javascript" charset="utf-8" src="/api/udin/assets/static/js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="/api/udin/assets/static/site/np_template/js/three.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/api/udin/assets/static/site/np_template/js/lazy.js"></script>
    <link type="text/css" rel="stylesheet" th:href="${componentsCss}"/>
    <script type="text/javascript" th:src="${componentsJS}"></script>
    <link type="text/css" rel="stylesheet"
          th:href="'/api/udin/assets/static/site/np_template/'+${theme}+'/css/theme.css'"/>
    <link type="text/css" rel="stylesheet"
          th:href="'/api/udin/assets/static/site/np_template/'+${theme}+'/css/color_'+${color}+'.css'"/>
    <style th:replace="udin/common::common_header_style"></style>
    <style type="text/css">
    </style>
</head>

<body>
<div class="body" style="padding: 0; margin: 0;">
    <div class="w-container w-main">
        <div th:style="${style}">
            <table style="width: 100%" class="table">
                <tbody>
                <tr th:each="i:${#numbers.sequence(1, row)}">
                    <td th:each="j:${#numbers.sequence(1, col)}">
                        <div class="udin-comp" th:attr="data-render=${(i - 1) * col + j}">
                            <div class="dpnn" th:id="'render-' + ${(i - 1) * col + j}" data-rp="before"></div>
                        </div>
                        <div th:style="'color: '+ ${titleColor} +'; text-align: '+ ${titleTextAlign} +';font-size: 12px; font-weight: normal;'"
                             th:class="'udin-theme-title-' + ${(i - 1) * col + j}"
                             th:text="'编号：'+${(i - 1) * col + j}"></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<input type="hidden" name="compname" th:value="${compname}" id="input-compname"/>
</body>
<script th:replace="udin/common::common_function_js"></script>
<script th:inline="javascript">
    //<![CDATA[
    var onloadfuncName = "API_UDIN_COMPONENT_ONLOAD_"
        + $("#input-compname").val().toUpperCase();
    // 点击选择后回调父级的方法
    var callbackfuncName = "API_UDIN_COMPONENT_ONLOAD_CALLBACK_"
        + $("#input-compname").val().toUpperCase();
    $(function () {
        // 加载完成回调父级的方法
        var onload = getVueFunc(onloadfuncName)
        if (onload) {
            onload();
        }
    })

    // 父级调用的渲染方法
    function render(theme, obj) {
        var testImageSrc = obj.imageSrc
        var themes = obj.themes
        $(".udin-comp").each(function (index) {
            var _this = $(this)
            var renderData = $.Udin.componentImage.getDefaultData();
            renderData.ele = "#render-" + (index + 1)
            renderData.data.config.img.src = testImageSrc
            renderData.data.config.textAlign = "center"
            renderData.data.config.link.href = "/"

            var theme = themes[index]
            renderData.data.theme = theme.theme
            renderData.data.config.caption = theme.caption

            $.Udin.componentImage.render(renderData);
            _this.find("a").each(function () {
                $(this).click(function (event) {
                    event.preventDefault()
                })
            })
        });

        $(".udin-comp").each(function (index) {
            if (parseInt(theme) - 1 === index) {
                $(this).addClass("active");
            }
            // 点击动作效果
            $(this).click(function () {
                $(".udin-comp").each(function () {
                    $(this).removeClass("active");
                })
                if (!$(this).hasClass("active")) {
                    $(this).addClass("active");
                }
                var callback = getVueFunc(callbackfuncName)
                if (callback) {
                    callback(index);
                } else {
                    console.error("Undefined callback: " + callbackfuncName)
                }
            })
        });
    }

    //]]>
</script>
</html>